Hace tiempo averiguábamos como añadir nuevos elementos de página a nuestra plantilla, más tarde J.Miur daba buena cuenta de las posibilidades del header de Blogger, y visitando a Rosa descubrimos como añadir nuevos elementos en una misma línea y de forma independiente esta vez en el footer.
Un ejemplo es el blog de Pizcos añadiendo en el footer widgets que normalmente añadimos en la sidebar, esta última por ejemplo es una muestra más de lo que se puede conseguir con imaginación y buen gusto.

Y siguiendo con nuestro afán de conseguir añadir nuevos elementos vamos a hacerlo esta vez en lo que llamamos encabezado del blog, después del logo o header.

Para conseguirlo nos debemos situar en nuestra plantilla Edicción de HTML y localizar :
<div id='header-wrapper'> a continuación encontraremos algo así:

<div id='header-wrapper'>   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  <b:widget id='Header1' locked='true' title='Aquí pondrá el título (cabecera)' type='Header'/>  </b:section>  </div>

Justo después añadiremos lo siguiente:
<div id='header-bloque-conten'><div id='header2' style='width: 30%; float: left; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque1' preferred='yes' style='float:left;'></b:section></div><div id='header3' style='width: 40%; float: left; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque2' preferred='yes' style='float:left;'></b:section></div><div id='header4' style='width: 30%; float: right; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque3' preferred='yes' style='float:left;'></b:section></div><div style='clear:both;'/><div id='header-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'><b:section class='header' id='bloque-bottom' preferred='yes'/></div><div style='clear:both;'/></div>

Una vez añadimos el anterior código nos situamos antes de ]]></b:skin> y añadimos unas líneas de código para personalizar el espacio donde irán nuestros nuevos elementos de página.

#header-bloque-conten{
clear:both;
}

.header-bloque {
margin: 5 auto;
padding: 10px;
text-align: center;
background: #000000;
border:1px solid #288cf0;
}

Donde padding: 10px; es el espacio para separar las columnas que podemos modificar visualizando en vista previa.
margin: 5 auto; es el espacio que dejamos en la parte superior.
En text-align: center; situamos el texto centrado, si deseamos que aparezca a la izquierda sustituimos center por left, y por right si es a la derecha.
Para cambiar el color de fondo lo haremos en background: #000000;
El tipo de borde, grosor y color en border:1px solid #288cf0;

Por último sólo nos queda guardar los cambios, en la plantilla de diseño podremos ver tres elementos independientes en línea horizontal, y en vista previa comprobaremos el siguiente efecto:





Podemos incluir un nuevo elemento añadiendo:

<div id='header5' style='width: 30%; float: right; margin:5; text-align: center;'>
<b:section class='header-bloque' id='bloque4' preferred='yes' style='float:left;'>
</b:section>
</div>


Modificando los valores style='width: 30%; de cada uno de los elementos de forma que la suma de todos no sea superior a 100%
Carlos Pizcos

Buen post madrina-))), a ver si se animas y cambiamos el aspecto de los blog, que no tiene porque ser todos con entradas y sidebar a un lado!!!

Por cierto ni de vacaciones???...jajajaja...no me has dicho nada de los cambios del blog...mmmmmmmm

Responder
Carlos Pizcos
Este comentario ha sido eliminado por el autor.
Responder
Gem@

Hola Pizcos, llevas razón no todo son dos columnas y a conformarse.
No estoy de vacaciones ahijado, ha sido por temas de médicos y demás. Pero todo bien :)

Responder
Carlos Pizcos

Me alegra saber que todo bien, pues aprovecha que no estas en casa-)))

Responder
Jesy2474

Hola Gem@ espero estes muy bien.
Me podes ayudar con lo siguiente, vieras que cambie la cabecera de mi blog, le agregue imagenes cambiantes, todo funciona como queria, solo que ahora no puedo hacer click en las imagenes de la cabecera para que me lleven a home.
Existe un codigo para que queden clickeables y me lleven a home como antes?
Muchisimas gracias por tu ayuda y que tengs un lindo dia.

Responder
Yola

Hola Gema, por aquí estoy como te dije, para plantear algunas dudas con la cabecera de mi blog.

Lo que tengo: una imagen, solo una, con el texto del título, subtitulo y logotipo incluidos (un poquito de photoshop). Quité el título original de blogger para que no se vea.

Lo que me gustaría: Dividir la cabecera de modo que:

1: La foto quede símplemente de fondo, para poder cambiarla de vez en cuando.

2: La imagen que tengo como título: "¿Dónde está Yola? Un viaje a la vida." sea un enlace a la página de inicio.

3: (Creo que lo más complicado) Que el logo (la niña mochilera) sea un enlace, por ejemplo a la etiqueta "viajes".

4 y último: Para rizar el rizo. Me encantaría que la niña cambiase de posición, si fuese de forma automatizada, mejor que mejor. Es decir, darle unas ubicaciones predeterminadas y que cada vez que se cargue la página aparezca en una distina.

Será por imaginación!! en fin, no se si todo esto es todavía utópico o si yo soy muy torpe pero, no se hacerlo y, si se puede, me encantaría implementar, cualquiera de las cuestiones o todas las que sean viables.

Muchas gracias de antemano por tu atención y la dedicación y entrega que te caracterizan.

Responder
Gem@

Hola Yola, todo eso puede hacerse, es muy laborioso pero se puede.
No hice ninguna entrada que hable de ello, sin embargo J.Miur de Vagabundia hizo una muy interesante que puede ser de ayuda.
Lo único que no vi en sus explicaciones fue eso de cambiar de posición la imagen pero es cuestión de preguntarle si hay forma de hacerlo, si la hay ten por seguro que tendrás el logo de tus sueños :)
http://vagabundia.blogspot.com/2008/07/el-header-de-blogger-jugando-un-poco.html

Responder
Gem@

Olvidé cerrar el código del enlace sorry..
El header de Blogger...

Ahora ;)

Responder
Yola

Otrav vez y mil más gracias por tu gran labor Gema.
Esa entrada de JMiur la tengo en estudio, pero va despacito.... muuuyyy despatico, jeje

Ya le preguntaré el detallito que falta y me podré con ello.

Responder
Gem@

Suerte Yola ;)

Responder
Anónimo

HOLA GEMA, que tal espero que estes bien, bueno tengo una gran duda pues una vez que tengo dividido en 3 secciones tal como muestras en el ejemplo, pues yo estoy probando igual que tu para no perderme, queria saber si habia alguna forma de agregarle una imagen dentro para que parezca un boton o como crear botones en el encabezado pero botones que enlacen diferentes partes de un blog o una pagina fuera del blog. Grcias y sigue asi tu labor es impresionate! Felicitaciones

Responder
Alicia

Hola GEMA soy nueva aqui en tu blog... apenas lo vi me encanto...

supper chevere todo lo que nos ensenas a hacer jejee...

bueno mi edad es solo 13 y tengo un blog de una serie,en donde tengo un chat,pero me gusta que entren las personas...

y el problema es que no se como publicar la pagina de mi blog para que personas entren y vean el blog...

quien de uds sabe algo para la publicidad..please me ayudan jejeje GRACIAS Gema por todo lo que has puesto aqui n.n !!!

Responder
Alicia

ahiii se me olvido dejarte la pagina de mi blog... jejeje aqui te la dejo,es "Texto

Responder
Gem@

Pero bueno y bueno ... Alicia ¿trece años?
!que maravilla¡ quien hubiera pillado un ordenador a los trece años aún estará aprendiendo jajajaja
Bueno Alicia lo que tu quieres es dar a conocer tu blog ¿verdad?
Lo primero de todo es añadirlo a los buscadores, el principal Google.
Luego añadir nuestro blog a directorios, pueden ser tantos como quieras pero yo te recomiendo los justos pero que sean conocidos puedes ver algunos en el desplegable que hay al final del blog.
Otra cosa que no suele fallar y se va consiguiendo con el tiempo es visitar páginas porqu eno sól ose trata de dar a conocer tu blog sino de conocer otros sitios afines con la temática de tu blog.
Para mi esto último es esencial, no sólo porque aprendes cosas y recibes información sino porque se llega a crear un vínculo muy especial entre las personas.

Responder
Alicia

Hola Gema.Gracias por su respuesta... jejeje si bueno,tengo solo esa edad..pero la cumplo en este diciembre... jeje

Bueno conozco muchos blogs,pero lo que si raro vi en uno es que tenia un cuadro con una imagen ya editada que como titulo tenia "VOTAME"...segun lo que me comentaron sobre eso,es que cuando le haces click,la pagina de ese blog sale publicada en una imagen,video,juegos,etc...

No creo que se pueda..pero aqui le dejo la pagina de ese blogPagina

Tengo muchas personas que tienen blogs,pero ellos solo tienen lo q el blog le ofrece,y dudo mucho q me quieran colocar como enlazada a su pagina ya que dicen que en mi blog hay cosas que nadie de ellos tienen..

Y como todos tienen chat es obvio que quieran tener mas gente en su blog jeje

Gracias por su respuesta Gema... aqui dejo la pagina de mi blog
URL


Saludos.Felicidades por su gran blog..es genial!

Responder
Gem@

Hola Alicia no veo esa imagen de VOTAME :(
Referente al tema de enlaces no debes preocuparte tanto, piensa que es lógico que cada uno enlace con total libertad además que es como debe ser.
Planteate que el blog es un espacio de entretenimiento y diversión para uno mismo, si llegan los enlaces (que llegarán) pues estupendo pero mientras tanto disfruta lo que haces y para quien lo haces que eres tu misma ;)

Responder
Alicia

jajajaja ok Gem@ es que bueno queria algo asi como pagina de publicacion o no se ..... jaja bueno intentare con eso de google q me dejo.

o como hiso para que su blog llegara tanta gente? jaja bueno la respuesta es q es muy bueno jaja n.n


gracias por su respuesta jeje

Responder
Gem@

Supongo que llegan guiados por las descargas no olvides que cuando alguien busca algo casi siempre recurre a Google.
Las visitas no son la parte principal del blog, hay visitas que llegan accidentalmente porque buscando algo en Google se encuentran con la página y sin más llegan y se van.
Yo pienso que hay que darle más importancia a cuatro amigos, conocidos, visitas fieles que puntualmente acuden para ver las novedades que les tienes preparadas.
Dale tiempo al tiempo ;)

Responder
Alicia

Hola

Si eso lo se Gem@... la paciencia es lo que me falta a mi jajaja intentare.. gracias por esa..
bueno ahora quisiera preguntarle si en su blog sale algo en donde me diga como tener las cosas con la bromita del signo mas y menos..es para resumir un poco el blog... jeje

Responder
Gem@

No entiendo eso de la bromita del signo mas y menos :O

Responder
Patán

Gem@, una consulta.........si encuentro en un blog...archivos que he subido a mi servidor, copiados textualmente en los trucos aplicados en ese determinado blog......

Si cambio el archivo en mi servidor, deja de funcionar el truco en ese Blog...

Gracias...

Responder
Gem@

Así es Patricio, si ese archivo lo eliminas o le cambias el nombre quedará inutilizado (pero acuérdate que también quedará inutilizado en tu blog si no lo cambias)
Lo lógico es que no tuvieras que hacer eso sino que el autor del otro blog los alojara en su propio dervidor. Muchas veces cuando explicamos algo proporcionamos la url del archivo para facilitar la tarea de alojarlo, pero no es prudente porque si en algún momento dejara de funcionar nuestro alojamiento el archivo queda sin utilidad.

Responder
Patán

Estoy de acuerdo, lo que pasó es que un determinado personaje, me copió textual, casi la totalidad de la plantilla............pero no se ha dado el trabajo de leer y hacer lo que a mi, en lo personal y que a ti te consta, me costó aprender.......

Crees que este personaje está bien......

Responder
Gem@

Son cosas que pasan Patricio, y que no se pueden evitar sencillamente porque el blog es público.
Otra cosa distinta es lo que me comentabas de los archivos, es muy difícil superar la banda ancha pero no imposible y con esto lo que se consigue es consumir espacio de un alojamiento ajeno.

Responder
Alicia

jajaja hablo de ese menu. mmm no se pero creo que ud lo usa mucho en su blog...
un ejemplo .. mm .. a ver ... a ya! bueno yo me meto en unas de sus entradas q tiene en etiquetas,y en sus opciones sale el titulo con el signo mas y menos donde sale lo que va a explicar... o algo asi.. me enrredo mucho jeeje

Responder
Gem@

Alicia no me hables de ud ;)

Eso que me dices se trata como bien dices de mostrar los títulos de las entradas de una misma etiqueta con la posibilidad de desplegar la entrada.
Puedes verlo aquí si decides hacerlo no olvides guardar antes una copia de la plantilla ;)

Responder
Cêz

Hola Gema, me gustaría pedirte una ayuda ya que estoy batallando con las soluciones que se me ocurren, el problema es que en mi blog en la pestaña Diseño > Elementos de la página, no logro quitar el elemento de gadget situado en la parte inferior e izquierda de la header porque tengo la intención de colocarle una imagen de 1000x300px en vez de ese fondo blanco que tengo ahí determinado por una plantilla que elegí. Agradecería mucho cualquier solución que me pudieras proporcionar.

Mi blog http://aaastrix.blogspot.com/

Gracias!

Responder
Gem@

:: Seguramente esa imagen que dices está incluida en la plantilla Céz y no en un gadget, no he podido verlo porque el blog es privado. Si quieres dime que plantilla estás usando o desde donde la descargaste para saber a qué imagen te refieres.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top